<script lang="ts" setup>
import { h } from "vue";

import { ElButton, ElImage, ElInput, ElSpace } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import { ProSelect } from "@/modules/package/form";
import EnumTag from "@/components/common/EnumTag.vue";
import DateRangePicker from "@/components/common/DateRangePicker.vue";

import router from "@/router";
import ApiActivity from "@/api/activity";
import useProTable from "@/hooks/useProTable";
import { EnumActivityStatus } from "@/utils/enum";

const tableColumns = [
  { label: "活动ID", prop: "id", width: 85 },
  {
    label: "活动图片",
    width: 160,
    slot: ({ row }: any) =>
      h(ElImage, {
        src: `${row.title_img}?x-oss-process=image/resize,p_20`,
        class: "w-120px h-120px rounded-md",
        previewSrcList: [row.title_img],
        previewTeleported: true,
        fit: "contain",
      }),
  },
  { label: "活动名称", prop: "title", minWidth: 200 },
  {
    label: "活动状态",
    minWidth: 60,
    slot: ({ row }: any) =>
      h(EnumTag, {
        value: row.status,
        options: EnumActivityStatus,
      }),
  },
  { label: "开始时间", prop: "start_time", minWidth: 124 },
  { label: "结束时间", prop: "end_time", minWidth: 124 },
  // { label: "地址", minWidth: 140, prop: "address", },
  // { label: "创建时间", prop: "create_time", width: 170 },
  { label: "操作", slot: "operate", width: 260 },
];

const formItems = [
  {
    label: "活动名称",
    children: {
      type: ElInput,
      field: "title",
      props: {
        clearable: true,
        placeholder: "输入活动名称",
      },
    },
  },

  {
    label: "活动时间",
    prop: "start_time",
    children: {
      type: DateRangePicker,
      field: ["start_time", "end_time"],
      props: {
        valueFormat: "YYYY-MM-DD HH:mm:ss",
      },
    },
  },
  {
    label: "售票时间",
    prop: "sale_start_time",
    children: {
      type: DateRangePicker,
      field: ["sale_start_time", "sale_end_time"],
      props: {
        valueFormat: "YYYY-MM-DD HH:mm:ss",
      },
    },
  },

  {
    label: "活动状态",
    children: {
      type: ProSelect,
      field: "act_status",
      props: {
        clearable: true,
        options: [
          { label: "未开始", value: 0 },
          { label: "进行中", value: 1 },
          { label: "已结束", value: 2 },
        ],
      },
    },
  },

  {
    label: "允许退款",
    children: {
      type: ProSelect,
      field: "is_refund",
      props: {
        clearable: true,
        options: [
          { label: "允许", value: 0 },
          { label: "不允许", value: 1 },
        ],
      },
    },
  },

  {
    label: "活动启用状态",
    children: {
      type: ProSelect,
      field: "status",
      props: {
        clearable: true,
        options: [
          { label: "开启", value: 0 },
          { label: "禁用", value: 1 },
        ],
      },
    },
  },
  {
    label: "售票开启状态",
    children: {
      type: ProSelect,
      field: "is_ticket",
      props: {
        clearable: true,
        options: [
          { label: "开启", value: 1 },
          { label: "未开启", value: 2 },
        ],
      },
    },
  },
];

const [ProTable] = useProTable({
  fetchUrl: ApiActivity.activityList,

  formOptions: {
    col: 6,
    formItems,
  },
  tableOptions: {
    columns: tableColumns,
  },
});
</script>

<template>
  <ProTable>
    <template #tool-left>
      <ElButton
        :icon="Plus"
        type="primary"
        @click="router.push('/activity/create')"
        >添加活动
      </ElButton>
    </template>

    <template #table-operate="{ row }">
      <ElSpace direction="vertical" alignment="start">
        <div>
          <ElButton
            link
            type="info"
            @click="router.push(`/activity/modify/${row.id}`)"
            >编辑</ElButton
          >
          <ElButton
            link
            type="danger"
            @click="router.push(`/activity/enroll/list?act_id=${row.id}`)"
            >活动商家</ElButton
          >
          <ElButton
            link
            type="primary"
            @click="router.push(`/activity/stall/list/${row.id}`)"
            >活动展位</ElButton
          >
        </div>
        <div>
          <ElButton
            link
            type="primary"
            @click="router.push(`/activity/etime/list/${row.id}`)"
            >场次管理</ElButton
          >
          <ElButton
            link
            type="primary"
            @click="router.push(`/activity/ticket/list/${row.id}`)"
            >票券管理</ElButton
          >
          <ElButton
            link
            type="primary"
            @click="router.push(`/activity/gift/list/${row.id}`)"
            >赠票列表</ElButton
          >
        </div>
      </ElSpace>
    </template>
  </ProTable>
</template>
